<!--
<k-input-upload
    v-model="如果是多文件，则为字符串数组，否则为字符串"
    multi="是否支持多文件"
/>
-->

<template>
    <div style="width: 100%; display: inline-block">
        <div v-for="(src, idx) in preview" :key="idx" class="upload-box">
            <img :src="src" class="thumb"/>

            <div class="box-delete">
                <i class="el-icon-delete" title="删除" @click="onRemoveFile(idx)"></i>
            </div>
        </div>
        <div class="upload-box" v-show="(!multi && preview.length === 0) || multi">
            <a href="javascript:;" @click="onClickSelect" class="upload-icon">
                <i class="el-icon-plus"></i>
            </a>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { UploadDialogModule } from '@/components/app-upload/store';
import { FileModel } from '@/models/file.model';

@Component({ name: 'KInputUpload' })
export default class KInputUpload extends Vue {
    @Prop({ type: [String, Array] }) readonly value!: string | string[];
    @Prop({ type: Boolean, default: true }) readonly multi!: boolean;

    get preview() {
        if (!this.value) {
            return [];
        }
        if (typeof this.value === 'string') {
            return [this.value];
        } else {
            return this.value;
        }
    }

    onClickSelect() {
        UploadDialogModule.open({
            multi: this.multi,
            callback: (files: FileModel[]) => {
                if (this.multi) {
                    this.$emit('input', [
                        ...this.preview,
                        ...files.map(f => f.src),
                    ]);
                } else {
                    this.$emit('input', files[0].src);
                }
                console.log('上传图片', files, this.preview)
            }
        });
    }

    onRemoveFile(idx: number) {
        let fs = this.value;
        if (this.multi) {
            (fs as string[]).splice(idx, 1);
            this.$emit('input', fs);
        } else {
            this.$emit('input', '');
        }
    }
}
</script>

<style scoped lang="scss">
.upload-icon {
    font-size: 32px;
    display: block;
    width: 100%;
    color: #999;
}
.upload-box {
    vertical-align: top;
    display: inline-flex;
    width: 110px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    align-items: center;
    border: solid 1px #eee;
    margin: 5px;
    position: relative;
    overflow: hidden;
    background-color: #fff;
    .thumb {
        width: 100%;
        height: 100%;
    }
    &:hover {
        .box-delete {
            transform: translateY(40px);
        }
    }
}
.box-delete {
    position: absolute;
    left: 0;
    top: -40px;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    transition: all .4s;
    i {
        flex: 1;
        color: #fff;
        font-size: 16px;
        text-align: right;
        cursor: pointer;
        &:hover {
            color: #7bff53;
        }
    }
}
</style>
